<template>
  <div class="nav-page">
    <h3>项目路由地图：</h3>
    <ul>
      <li v-for="item in urls" :key="item">
        <a :href="item">{{ item }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      urls: []
    }
  },
  created() {
    this.urls = this.getEntry()
  },
  methods: {
    getEntry() {
      const requirePages = require
        .context(
          // 其组件目录的相对路径
          '/src/pages',
          // 是否查询其子目录
          true,
          // 匹配基础组件文件名的正则表达式
          /main\.js$/
        )
        .keys()
        .map(item => {
          return item.split('/')[1]
        })

      // 匹配当前Url
      let currentPageUrl = ''
      requirePages.forEach(item => {
        if (window.location.href.search(item) !== -1) {
          currentPageUrl = `${window.location.href.split(item)[0]}`
        }
      })

      const requirePagesUrls = requirePages.map(item => {
        return `${currentPageUrl}${item}.html#/`
      })

      return requirePagesUrls
    }
  }
}
</script>

<style lang="scss" scoped></style>
